<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>

    </head>

    <body>
        <div id="app"></div>
    </body>


    <script type="text/babel">
        // const element=(
        //     <div>    
        //     hello world
        //     </div>        
        // )

        const list = [
            // 1,2,3
            // 'a','b','c'
            <li key='1'>苹果</li>,
            <li key='2'>香蕉</li>,
            <li key='3'>橘子</li>,
        ]

        const todos = [
            { name: 2, title: '张三' },
            { name: 3, title: '李四' }
        ]

        // var list1=[]
        // todos.forEach((item,i) => {
        //     list1.push(<li key= {i}> {item.title}</li>)
        //     list1.push(<li key= {item.name}> {item.title}</li>)
        // });

        const list1 = todos.map((item, i) => {
            return (<li key={i}> {item.title}</li>)
        })


        const element = (
            <div>
                <ul>{list}</ul>
                <ul>{list1}</ul>
                <ul> {
                    todos.map((item, i) => {
                        return (<li key={i}> {item.title}</li>)
                    })}
                </ul>
            </div>
        )
        ReactDOM.render(element, document.getElementById("app"))
    </script>


</html>